<template>
  <div class="seckill-wrapper">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="拼团活动" name="first" />
        <el-tab-pane label="拼团订单" name="second" />
      </el-tabs>
    </div>
    <div class="content">
      <div v-if="activeName === 'first'" class="top d-flex">
        <div class="top-left">
          <el-button
            v-for="(item, index) of seckillTypes"
            :key="index"
            :class="{ 'active': isActive === index }"
            @click="buttonClick(index)"
          >{{ item }}</el-button>
        </div>
        <div class="top-right">
          <el-button type="primary" class="add" @click="add">添加</el-button>
        </div>
      </div>
      <component :is="cmpName" :list="list" :my-type="myType" @success="handleSuccess" />
    </div>
    <Pagination v-if="activeName === 'first'" class="pagination" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Pagination from '@/common/pagination'
import TableList from '@/views/cluster/table-list'
import { getClusterList } from '@/api/seckill'
import Order from './order'
const ERR_OK = 200
export default {
  components: {
    TableList,
    Order,
    Pagination
  },
  data() {
    return {
      cmpName: TableList,
      activeName: 'first',
      isActive: 0,
      seckillTypes: ['拼团中', '待发布', '已结束'],
      list: [],
      total: 0,
      currentPage: 1,
      myType: 1
    }
  },
  created() {
    this._getClusterList(this.myType, this.currentPage)
  },
  methods: {
    handleSuccess() {
      this.currentPage = 1
      this._getClusterList(this.myType, this.currentPage)
    },
    handleNextPage(page) {
      this.currentPage = page
      switch (this.activeName) {
        case 'first':
          this.typeChange()
          break
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
      this.activeName = tab.name
      switch (this.activeName) {
        case 'first':
          this.cmpName = TableList
          break
        case 'second':
          this.cmpName = Order
          break
      }
    },
    typeChange() {
      switch (this.isActive) {
        case 0:
          this._getClusterList(this.myType, this.currentPage)
          break
        case 1:
          this._getClusterList(this.myType, this.currentPage)
          break
        case 2:
          this._getClusterList(this.myType, this.currentPage)
          break
      }
    },
    buttonClick(index) {
      this.isActive = index
      this.myType = index + 1
      this.typeChange()
    },
    add() {
      this.$router.push({ path: '/cluster/add-mng' })
    },
    _getClusterList(myType, page) {
      getClusterList(myType, page)
        .then(res => {
          if (res.code === ERR_OK) {
            res.data.list.forEach((item, index) => {
              item.is_publish = !!item.is_publish
            })
            this.list = res.data.list
            this.total = res.data.total
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-pagination.scss";
.seckill-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    margin-top: 10px;
  }
  .content {
  }
}
.add {
  background-color: #5a98de !important;
  color: #fff !important;
}
.el-button {
  background: #e5e5e5;
  &.active {
    background-color: #5a98de !important;
    color: #fff !important;
  }
}
.d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
</style>
